<template lang="pug">
  .clearfix
    Modal(
        width="1100"
        v-model="isBatchDealModal"
        :title="type == 'add' ? '批量增加数据权限': '批量删除数据权限'"
        class-name="vertical-center-modal"
    )
        Transfer.default-transfer(
            :data="userList"
            :target-keys="targetKeys"
            :list-style="listStyle"
            :titles="titles"
            filterable
            @on-change="handleChange"
        )

        RadioGroup.beautiful-radio-group.ml-10(v-model="contractRadio")
            Col.pr-20.mb-15.mt-15.radiocol()
                Radio(label="0") {{''}}
                .radio-title 数据权限组名称：
                Select(v-model="groupID" placeholder="数据权限组" filterable clearable)
                    Option(v-for="(item, index) in accountList" :value="item.value" :key="item.value") {{ item.text }}
            Col.pr-20.mb-15.mt-15.radiocol.radiocol-tree()
                Radio(label="1") {{''}}
                .radio-title 数据权限：
                Tree.h200.overflow-y-scroll(:data="permissionList" ref="tree" show-checkbox check-directly @on-check-change="treeCheckChange")
        div(slot="footer")
          Button(@click="cancel") 取消
          Button(type="info" @click="ok") 确定
</template>

<script>
import { SysDataPermissionApi } from '@/api/SysDataPermission.api.js'
import { SysDataPermissionGroupApi } from '@/api/SysDataPermissionGroup.api.js'

import { constants } from 'fs';
export default {
  name: '',

  props: {
  },

  data () {
    return {
      isBatchDealModal: false,
      groupID: '',
      loading: false,
      PageIndex: 1,
      PageSize: 10,
      codeTotal: 0,
      type:'',
      contractRadio: '', 
      listStyle: {
        width: '460px',
        height: '300px'
      },
      titles: ['未绑定客户', '已绑定客户'],
      targetKeys: [],
      userList: [],
      accountList: [],
      permissionList: [],
      treeCheckList: [],
      customerIdList: []
    }
  },

  watch: {
  },

  mounted () {
    
  },

  methods: {
    ok () {
      let targetKeys = this.targetKeys
      let contractRadio = this.contractRadio
      let groupID = this.groupID
      let treeCheckList = this.treeCheckList
      console.log(contractRadio,'contractRadio')
      console.log(groupID,'groupID')
      if (targetKeys.length == 0) {
        this.$Message.warning('请选择客户')
        return
      }
      if (contractRadio == '') {
        this.$Message.warning('请选择数据权限方案')
        return
      }
      if (contractRadio == '0' && groupID == '') {
        this.$Message.warning('请选择数据权限组')
        return
      } 
      if (contractRadio == '1' && treeCheckList.length == 0) {
        this.$Message.warning('请选择数据权限')
        return
      }
      let permissionIdList = []
      if (contractRadio == '1') {
        for (var i in this.treeCheckList) {
          permissionIdList[i] = this.treeCheckList[i].id
        }
      }
      let data = {
        "IsAdd": this.type == 'add',
        "CustomerIdList": this.targetKeys,
        "UserIdList": this.customerIdList,
        "GroupId": contractRadio == '0' ? this.groupID : null,
        "PermissionIdList": contractRadio == '1' ? permissionIdList : null,
      }
      console.log(data)
      SysDataPermissionApi.batchSetPermission(data).then(res => {
        console.log(res,'batchSetPermission')
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.isBatchDealModal = false
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },

    cancel () {
      this.isBatchDealModal = false
    },

    treeCheckChange (value) {
      console.log('被勾选的节点有this.selectNode: ', value)
      this.treeCheckList = value
    },
    
    serverDown () {
      let data = {
        pageIndex: 1,
        pageSize: 3000
      }
      SysDataPermissionApi.getCustomerNameList(data).then(res => {
        if (res.data.success) {
          this.userList = res.data.data
          for (var i in this.userList) {
              this.userList[i].key = this.userList[i].id
              this.userList[i].label = this.userList[i].name
          }
          console.log(this.userList,'this.userList')
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },

    getPermissionGroup() {
      console.log('getPermissionGroup')
      SysDataPermissionApi.getBatchSetPermission({}).then(res => {
        console.log(res,'getPermissionGroup')
        if (res.data.success) {
          this.accountList = res.data.data.groupList
          this.permissionList = res.data.data.permissionList
        } else {
          this.$Message.error({
              content: res.data.message,
              duration: 10,
              closable: true
          })
        }
      })
    },

    handleChange (newTargetKeys, direction, moveKeys) {
      this.targetKeys = newTargetKeys
      console.log(this.targetKeys)
    }
  }
}
</script>

<style lang="less" scope>
    .radiocol{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        .radio-title{
            width: 220px;
        }
        .radio-title:before{
            content: '*';
            display: inline-block;
            margin-right: 4px;
            line-height: 1;
            font-family: SimSun;
            font-size: 14px;
            color: #ed4014;
        }
    }
    .radiocol-tree{
        align-items: flex-start;
        .radio-title{
          width: 140px;
        }
    }
</style>
